<template>
	<div class="person-icon">
		<img src="~assets/image/xiaohei.png" />
		<p>廖小黑的博客</p>
		<ul>
			<li>
				<a href="">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-weibo"></use>
					</svg>
				</a>
				<div class="tip">微博</div>
			</li>
			<li>
				<a href="">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-weixin"></use>
					</svg>
				</a>
				<div class="tip">微信</div>
			</li>
			<li>
				<a href="">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-bilibili-fill"></use>
					</svg>
				</a>
				<div class="tip">b站</div>
			</li>
		</ul>
	</div>
</template>

<script>
    export default {
        name: "PersonIcon"
    }
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.person-icon li svg:active {
			transform: scale(1.5);
			color: #23b6d4;
		}
		.person-icon img {
			margin-top: .3rem;
			width: 30%;
		}
		.person-icon p {
			letter-spacing: .3rem;
		}
		.person-icon ul{
			font-size: 1.3rem;
			margin-bottom: .5rem;
		}
		.person-icon li{
			margin: 0 2rem;
		}
	}
	@media screen and (min-width: 993px) {
		.person-icon li svg:hover {
			transform: scale(1.5);
			color: #23b6d4;
		}
		.person-icon img {
			margin-top: .1rem;
			width: 68%;
		}
		.person-icon ul{
			font-size: .4rem;
		}
		.person-icon li{
			margin: 0 .05rem .1rem;
		}
	}
	a{
		outline:none;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	.person-icon {
		width: 100%;
		text-align: center;
		color: #AAAAAA;
	}
	.person-icon img {
		background-color: #ecf0f1;
		border-radius: 50%;
	}
	.person-icon p {
		margin: .1rem 0;
	}
	.person-icon ul{
		display: flex;
		justify-content: center;
		list-style: none;
	}
	.person-icon .tip {
		margin-top: .05rem;
		font-size: .12rem;
		color: #C5C5C5;
	}
	.person-icon p {
		margin: .1rem 0;
	}
</style>
